<template>
<div class="foldopen">
		<div class="wrapper">
			<div class="foldbox" :style="props.foldopt.headerStyle">
				<slot name="header"></slot>
        <span @click="clickIsShow" class="styleOpen" v-if="props.foldopt.isButton">
          <el-icon v-if="isOpen"><ArrowUp /></el-icon>
          <el-icon v-else><ArrowDown /></el-icon>
          {{ isOpen ? '折叠' : '展开'}}
        </span>
			</div>

			<div class="openbox-container" ref="openBox" :style="props.foldopt.contentStyle">
				<div class="contentbox">
            <slot name="content"></slot>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang='ts'>
import { ref, watch, defineExpose } from 'vue';
const isOpen = ref(false)
const openBox = ref()
let openHeight = 0

const props = defineProps({
  foldopt:{
    type:Object,
    default:{
      isOpen:false,                       // 默认是否展开
      headerStyle:{ background:'#fff' },  // 固定区域样式
      contentStyle:{ background:'#fff' }, // 折叠区域样式
      isButton:true,                      // 是否显示折叠按钮
    }
  }
})

const clickIsShow = () => {
  isOpen.value = !isOpen.value
  clickOpenHidden()
}
const clickOpenHidden = () => {
  let openDom = openBox.value
  let boxheight = openDom.offsetHeight
  if(isOpen.value) {
      openDom.style.height = 'auto'
      boxheight = openDom.offsetHeight + 'px'
      openDom.style.height = openHeight + 'px'
      openDom.style.height = boxheight
    } else {
      openDom.style.height = openHeight + 'px'
  }
}
defineExpose({
  clickOpenHidden
})
watch(
  () => [props.foldopt.isOpen],
  (newValue,oldValue) => {
    if(oldValue && newValue[0] !== oldValue[0]){
      isOpen.value = newValue[0]
      setTimeout(() => {
        clickOpenHidden()
      }, 100);
    }
  },
  {
    immediate:true,
  }
)

</script>

<style lang='scss' scoped>
.wrapper {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	cursor: pointer;
  .foldbox{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgb(223, 223, 223) ;
    align-items: center;
    padding: 10px 0;
    .styleOpen{
      color: #409EFF;
      font-size: 14px;
    }
  }
	.openbox-container {
    height: 0;
		overflow: hidden;
		transition: height ease .5s; //动画效果
		background: transparent;
		box-sizing: border-box;

		.contentbox {
			margin-top: 16px;
		}
	}
}
</style>
